<template>
	<div class="detail top-page" ref="detailRef">
		<tab-control
			:titles="titles"
			class="tabs"
			v-if="showTabControl"
			@tabItemClick="tabClick"
			ref="tabControlRef"
		></tab-control>

		<van-nav-bar title="房屋详情" left-text="旅途" left-arrow @click-left="onClickLeft" />

		<div class="main" v-if="mainPart" v-memo="[mainPart]">
			<detail-swiper :swiperData="mainPart.topModule.housePicture.housePics"></detail-swiper>
			<detail-info name="描述" :ref="getSection" :topInfos="mainPart.topModule"></detail-info>
			<detail-facility
				name="设施"
				:ref="getSection"
				:house-facility="mainPart.dynamicModule.facilityModule.houseFacility"
			></detail-facility>
			<detail-landlord
				name="房东"
				:ref="getSection"
				:landlord="mainPart.dynamicModule.landlordModule"
			></detail-landlord>
			<detail-comment
				name="评论"
				:ref="getSection"
				:comment="mainPart.dynamicModule.commentModule"
			></detail-comment>
			<detail-notice name="须知" :ref="getSection" :order-rules="mainPart.dynamicModule.rulesModule.orderRules" />
			<detail-map name="地图" :ref="getSection" :position="mainPart.dynamicModule.positionModule"></detail-map>
			<detail-intro name="周边" :ref="getSection" :price-intro="mainPart.introductionModule" />
		</div>

		<div class="footer">
			<img src="@/assets/img/detail/icon_ensure.png" alt="" />
			<div class="text">弘源旅途, 永无止境!</div>
		</div>
	</div>
</template>

<script setup>
	import { useRouter, useRoute } from 'vue-router'
	import { getDetailInfo } from '@/services'
	import { computed, onMounted, ref, watch } from 'vue'
	import DetailSwiper from './cpns/detail-swiper.vue'
	import DetailInfo from './cpns/detail-info.vue'
	import DetailFacility from './cpns/detail-facility.vue'
	import DetailLandlord from './cpns/detail-landlord.vue'
	import DetailComment from './cpns/detail-comment.vue'
	import DetailNotice from './cpns/detail-notice.vue'
	import DetailMap from './cpns/detail-map.vue'
	import DetailIntro from './cpns/detail-intro.vue'
	import TabControl from '@/components/tab-control/tab-control.vue'
	import useScroll from '@/hooks/useScroll'

	const detailRef = ref(null)
	const tabControlRef = ref(null)
	const router = useRouter()
	const route = useRoute()
	const onClickLeft = () => {
		router.back()
	}

	const detailInfo = ref({})
	const id = route.params.id
	getDetailInfo(id).then((res) => {
		detailInfo.value = res.data
	})
	const mainPart = computed(() => detailInfo.value.mainPart)

	// tabControl
	const sectionEls = ref({})
	const getSection = (value) => {
		// 组件卸载时, value为null, 此时点击返回会报错
		if (!value) return
		const name = value.$el.getAttribute('name')
		sectionEls.value[name] = value.$el
	}
	const { scrollTop } = useScroll(detailRef)
	const showTabControl = computed(() => {
		return scrollTop.value >= 300
	})
	const titles = computed(() => {
		return Object.keys(sectionEls.value)
	})

	let isClick = false
	let currentDistance = -1
	const tabClick = (index) => {
		const key = Object.keys(sectionEls.value)[index]
		const el = sectionEls.value[key]
		let distance = el.offsetTop
		if (index !== 0) {
			distance = distance - 44
		}

		isClick = true
		currentDistance = distance

		detailRef.value.scrollTo({
			// landlordRef.value是自定义组件， landlordRef.value.$el需要拿到自定义组件的根元素
			// top: landlordRef.value.$el.offsetTop,
			top: distance,
			behavior: 'smooth',
		})
	}

	// 页面滚动, 滚动时匹配对应的tabControl的index
	watch(scrollTop, (newVal) => {
		console.log('newVal: ', newVal)
		if (newVal === currentDistance) {
			isClick = false
		}
		if (isClick) return
		const els = Object.values(sectionEls.value)
		// 获取所有区域的offsetTops
		const values = els.map((el) => el.offsetTop)
		// console.log('values: ', values)
		let index = values.length
		for (let i = 0; i < values.length; i++) {
			// 44为tabControll的高度
			if (values[i] > newVal + 44) {
				index = i - 1
				break
			}
		}
		tabControlRef.value?.setCurrentIndex(index)
	})
</script>

<style lang="less" scoped>
	.tabs {
		position: fixed;
		z-index: 9;
		left: 0;
		right: 0;
		top: 0;
	}

	.footer {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 120px;

		img {
			width: 123px;
		}

		.text {
			margin-top: 12px;
			font-size: 12px;
			color: #7688a7;
		}
	}
</style>
